<template>
  <div class="order-detail-page">
    <div class="out-box" style="margin: 20px 30px">
      <el-collapse v-model="collapseItems">
        <el-collapse-item name="0">
          <template slot="title">
            <i class="header-icon el-icon-tickets"></i>
            <div class="collapse-title">基本信息</div>
          </template>
          <el-table :data="[orderInfo]" border style="width: 100%">
            <el-table-column prop="orderNo" label="订单号"></el-table-column>
            <!--<el-table-column prop="categoryId" label="一级类目">-->
              <!--<template slot-scope="scope">-->
                <!--<span>{{ scope.row.categoryId?JSON.parse(scope.row.categoryId)['name']:''  }}</span>-->
              <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column label="订单来源" width="130">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_source"
                  :value="scope.row.orderSource"
                />
              </template>
            </el-table-column>
            <el-table-column prop="status" label="订单状态" width="130">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_status"
                  :value="scope.row.status"
                />
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="订单备注"></el-table-column>
            <el-table-column
              prop="refundTradeNo"
              label="退款单号"
            ></el-table-column>
            <el-table-column
              prop="payCash"
              label="实付现金"
            >
              <template slot-scope="scope">
                {{ scope.row.payCash == '0' ? '0.01': scope.row.payCash }}
              </template>
            </el-table-column>
            <el-table-column
              prop="payIntegral"
              label="实付积分"
            ></el-table-column>
            <el-table-column
              prop="createDate"
              label="创建时间"
            ></el-table-column>
            <el-table-column prop="isMakrout" label="开票状态" width="130">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_is_makeout"
                  :value="scope.row.isMakrout"
                />
              </template>
            </el-table-column>
            <template v-if="orderInfo.memberType && orderInfo.memberType=='0'">
              <el-table-column prop="activeStatus" label="激活状态" width="130">
                <template slot-scope="scope">
                  <dict-tag
                    :options="dict.type.order_active_status"
                    :value="scope.row.activeStatus"
                  />
                </template>
              </el-table-column>
            </template>
            <template v-else>
              <el-table-column prop="userphone" label="充值手机号" width="130"></el-table-column>
              <el-table-column prop="activeStatus" label="激活状态" width="130">
                <template slot-scope="scope">
                  <!--:options="dict.type.order_active_status"-->
                  <dict-tag
                    :options="dict.type.order_recharge_status"
                    :value="scope.row.activeStatus"
                  />
                </template>
              </el-table-column>
            </template>
          </el-table>
        </el-collapse-item>
        <el-collapse-item name="1">
          <template slot="title">
            <i class="header-icon el-icon-goods"></i>
            <div class="collapse-title">商品信息</div>
          </template>
          <el-table
            :data="orderInfo.items"
            border
            style="width: 100%"
            :default-expand-all="true"
            :span-method="spanCellMerge"
          >
            <!--<el-table-column type="expand">-->
              <!--<template slot-scope="props">-->
                <!--<div style="margin-left: 50px">-->
                  <!--<div class="title" style="display: flex">-->
                    <!--<i class="header-icon el-icon-goods"></i>-->
                    <!--<div class="collapse-title">软件信息</div>-->
                  <!--</div>-->
                  <!--<el-table :data="props.row.services" border>-->
                    <!--<el-table-column-->
                      <!--prop="serviceName"-->
                      <!--label="服务名称"-->
                    <!--&gt;</el-table-column>-->
                    <!--<el-table-column-->
                      <!--prop="modelName"-->
                      <!--label="车型名称"-->
                    <!--&gt;</el-table-column>-->
                    <!--<el-table-column-->
                      <!--prop="serviceCode"-->
                      <!--label="服务代码"-->
                    <!--&gt;</el-table-column>-->
                    <!--<el-table-column-->
                      <!--prop="description"-->
                      <!--label="服务说明"-->
                    <!--&gt;</el-table-column>-->

                    <!--<el-table-column prop="activeStatus" label="激活状态">-->
                      <!--<template slot-scope="scope">-->
                        <!--<dict-tag-->
                          <!--:options="dict.type.order_active_status"-->
                          <!--:value="scope.row.activeStatus"-->
                        <!--/>-->
                      <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                      <!--prop="activeTime"-->
                      <!--label="激活时间"-->
                    <!--&gt;</el-table-column>-->
                    <!--&lt;!&ndash; <el-table-column prop="status" label="服务周期"></el-table-column>-->
            <!--<el-table-column prop="status" label="到期时间"></el-table-column> &ndash;&gt;-->
                  <!--</el-table>-->
                <!--</div>-->
              <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column prop="spuId" label="商品id"></el-table-column>
            <el-table-column prop="picUrl" label="商品图片" width="110">
              <template slot-scope="scope">
                <img
                  class="imgClass"
                  :src="scope.row.picUrl"
                  width="88"
                  height="88"
                />
              </template>
            </el-table-column>
            <el-table-column prop="spuName" label="商品名称"></el-table-column>
            <el-table-column prop="salesPrice" label="价格"></el-table-column>
            <el-table-column prop="skuId" label="skuID"></el-table-column>
            <el-table-column prop="specName" label="规格名"></el-table-column>
            <el-table-column prop="specInfo" label="规格值">
              <template slot-scope="scope">
                <div v-for="(item, idx) in [1,2,3]">
                  {{ isJSON(scope.row.specInfo)?JSON.parse(scope.row.specInfo)['name' + item]:null }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="quantity" label="购买数量"></el-table-column>
            <el-table-column label="商品快照" width="150">
              <template slot-scope="scope">
                <el-button
                  type="primary"
                  size="mini"
                  @click="handleGoodSnapshot(scope.row)"
                  >查看商品快照</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
         <el-collapse-item name="2">
          <template slot="title">
            <i class="header-icon el-icon-umbrella"></i>
            <div class="collapse-title">软件信息</div>
          </template>
          <el-table :data="seriesList" border style="width: 100%">
            <el-table-column
            prop="serviceName"
            label="服务名称"
            ></el-table-column>
            <el-table-column
            prop="modelName"
            label="车型名称"
            ></el-table-column>
            <el-table-column
            prop="serviceCode"
            label="服务代码"
            ></el-table-column>
            <el-table-column
            prop="description"
            label="服务说明"
            ></el-table-column>

            <el-table-column prop="activeStatus" label="激活状态" v-if="orderInfo.memberType">
              <template slot-scope="scope">
                <dict-tag
                :options="dict.type.order_active_status"
                :value="scope.row.activeStatus"
                />
              </template>
            </el-table-column>
            <el-table-column prop="activeStatus" label="激活状态" v-else>
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_recharge_status"
                  :value="scope.row.activeStatus"
                />
              </template>
            </el-table-column>
            <el-table-column
            prop="activeTime"
            label="激活时间"
            ></el-table-column>
            <!-- <el-table-column prop="status" label="服务周期"></el-table-column>
            <el-table-column prop="status" label="到期时间"></el-table-column> -->
          </el-table>
        </el-collapse-item>
        <el-collapse-item name="3">
          <template slot="title">
            <i class="header-icon el-icon-user"></i>
            <div class="collapse-title">用户信息</div>
          </template>
          <el-table :data="[orderInfo]" border style="width: 50%">
            <el-table-column prop="userId" label="用户id"></el-table-column>
            <el-table-column prop="userName" label="用户昵称"></el-table-column>
            <!--<template v-if="orderInfo.memberType && orderInfo.memberType=='0'">-->
            <el-table-column prop="modelCode" label="车型代码"></el-table-column>
            <el-table-column prop="vin" label="车架号"></el-table-column>
            <!--</template>-->
          </el-table>
        </el-collapse-item>
        <el-collapse-item name="4">
          <template slot="title">
            <i class="header-icon el-icon-bank-card"></i>
            <div class="collapse-title">支付信息</div>
          </template>
          <el-table :data="orderInfo.payInformationList" border style="width: 100%">
            <el-table-column prop="payType" label="支付方式">
              <template slot-scope="scope">
                <span v-if="!dict.type.pay_type.find(e=>e.value == scope.row.payType)">-</span>
                <dict-tag
                  v-else
                  :options="dict.type.pay_type"
                  :value="scope.row.payType"
                />
                <template>

                </template>
              </template>
            </el-table-column>
            <el-table-column prop="payStatus" label="支付状态">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_is_pay"
                  :value="scope.row.payStatus"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="payAmount"
              label="支付额度"
            ></el-table-column>

            <el-table-column
              prop="payTime"
              label="支付时间"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.payTime || '-' }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item name="5">
          <template slot="title">
            <i class="header-icon el-icon-receiving"></i>
            <div class="collapse-title">操作记录</div>
          </template>
          <el-table :data="orderInfo.logs" border style="width: 100%">
            <el-table-column prop="operateRole" label="操作角色">
              <template slot-scope="scope">
                <dict-tag
                  :options="dict.type.order_operate_role"
                  :value="scope.row.operateRole"
                />
              </template>
            </el-table-column>
            <el-table-column prop="createBy" label="操作人员"></el-table-column>
            <el-table-column
              prop="createDesc"
              label="操作事项"
            ></el-table-column>
            <el-table-column prop="createDesc" label="备注"></el-table-column>
            <el-table-column
              prop="createDate"
              label="操作时间"
            ></el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>

    <goods-snapshot
      :visible.sync="showGoodsSnapshot"
      :goodsData="goodsSnapshotData"
    ></goods-snapshot>
  </div>
</template>
<script>
import GoodsSnapshot from "@/components/GoodsSnapshot";
import { getOrder } from "@/api/shop/order";
import { isJSON } from "@/utils/index";

export default {
  name: "order-detail-page",
  dicts: [
    "order_is_makeout",
    "order_is_pay",
    "order_status",
    "order_active_status",
    "order_recharge_status",
    "app_name_type",
    "order_payment_type",
    "order_source",
    "order_operate_role",
    "pay_type"
  ],
  components: {
    GoodsSnapshot,
  },
  props: {},
  computed: {},
  watch: {},
  data() {
    return {
      orderInfo: {},
      collapseItems: ["0", "1", "2", "3", "4", "5"], // 默认展开的项
      showGoodsSnapshot: false,
      goodsSnapshotData: {},
      merge:[],  //存放需要合并的行
      pos:'',   //需要合并行下标
      seriesList:[], //存放服务信息
    };
  },
  created() {
    let id = this.$route.query.id;
    if (!id) {
      this.$message.error("缺少订单id");
      return;
    }

    console.log("this.dict: ", this.dict);

    this.getData(id);
  },
  mounted() {},
  methods: {
    isJSON(str){
      return isJSON(str)
    },
    getData(id) {
      getOrder(id).then((res) => {
        this.getSpanArr(res.data.items, 'spuId');
        this.initSeriesList(res.data.items);
        this.orderInfo = res.data;
        /// TODO
        // this.orderInfo.items = [
        //   {
        //     id: "1550375360753827840",
        //     orderId: "1550375360661553152",
        //     spuId: "1539853623467216897",
        //     spuName: "比亚迪冥想软件",
        //     specInfo: "永久期",
        //     skuId: "1539853623765012482",
        //     picUrl:
        //       "http://dev-tsp-1255645766.cos.ap-guangzhou.myqcloud.com/2022/05/23/0f6bfaa5327c46769a65456b958fdef4.jpg",
        //     quantity: 2,
        //     status: "1",
        //     activeStatus: "0",
        //     isRefund: "0",
        //     salesPrice: 33,
        //     paymentPrice: 66,
        //     costPrice: 33,
        //     refundTradeNo: "",
        //     services: [
        //       {
        //         id: "1550375360932986882",
        //         orderId: "1550375360661553152",
        //         orderItemId: "1550375360753827840",
        //         serviceCode: "A02",
        //         serviceName: "车道偏离预警",
        //         category: "drive_help",
        //         description: "09090",
        //         learn: 1,
        //         learningAddress: '["00000000"]',
        //         examAddress: "8888888",
        //         series: "SX3",
        //         modelName: "BYD-SX3",
        //         modelCode: "bydsx3",
        //         vehicleConfig: "默认版型",
        //         createDate: 1658472939000,
        //         lastUpdateDate: 1658472939000,
        //         deleteFlag: "0",
        //         isActivate: "0",
        //       },
        //       {
        //         id: "1550375360932986822",
        //         orderId: "1550375360661553152",
        //         orderItemId: "1550375360753827841",
        //         serviceCode: "A03",
        //         serviceName: "车警",
        //         category: "drive_help",
        //         description: "09090",
        //         learn: 1,
        //         learningAddress: '["00000000"]',
        //         examAddress: "8888888",
        //         series: "SX3",
        //         modelName: "BYD-SX3",
        //         modelCode: "bydsx3",
        //         vehicleConfig: "默认版型",
        //         createDate: 1658474939000,
        //         lastUpdateDate: 1658475939000,
        //         deleteFlag: "0",
        //         isActivate: "1",
        //       },
        //     ],
        //     orderGoods: {
        //       id: "1550375360791576576",
        //       orderId: "1550375360661553152",
        //       orderItemId: "1550375360753827840",
        //       name: "比亚迪冥想软件",
        //       sellPoint: "<p>比亚迪冥想软件</p>",
        //       description:
        //         '<p><img src="http://dev-tsp-1255645766.cos.ap-guangzhou.myqcloud.com/2022/06/23/bf26b0f3b7b14727a3bf49aa288fa9bf.jpg"></p>',
        //       picUrls: [
        //         "http://dev-tsp-1255645766.cos.ap-guangzhou.myqcloud.com/2022/05/23/0f6bfaa5327c46769a65456b958fdef4.jpg",
        //         "http://dev-tsp-1255645766.cos.ap-guangzhou.myqcloud.com/2022/05/30/8f88d2c1f42b450fa10437098f40682e.jpg",
        //       ],
        //       priceDown: 33,
        //       priceUp: 33,
        //       saleNum: 0,
        //       specType: "1",
        //       verifyStatus: "1",
        //       series: "比亚迪",
        //       modelName: ["比亚迪-唐", "比亚迪-宋", "比亚迪-汉"],
        //       modelCode: ["T", "S", "H"],
        //       termType: "ios",
        //       ensureIds: ["1", "2", "3", "4"],
        //       usageNotice:
        //         "<p>使用须知：</p><p><br></p><p>1、xxxxx</p><p><br></p><p>2、xxxxx</p><p><br></p><p>3、xxxxx</p><p><br></p><p>4、xxxxx</p>",
        //       activated: "0",
        //       protocolUrl: "https://whalego.desaysv-xxzx.com/",
        //       introduction: "比亚迪冥想软件",
        //       deviceType: "1",
        //       picUrl:
        //         "http://dev-tsp-1255645766.cos.ap-guangzhou.myqcloud.com/2022/05/23/0f6bfaa5327c46769a65456b958fdef4.jpg",
        //       salesPrice: 0,
        //       marketPrice: 33,
        //       costPrice: 33,
        //       androidSalesPrice: 33,
        //       iosSalesPrice: 33,
        //       tobSalesPrice: 33,
        //       serviceTime: 9999,
        //       spuId: "1539853623467216897",
        //       skuId: "1539853623765012482",
        //     },
        //     createBy: "api",
        //     createDate: 1658473265000,
        //     lastUpdateDate: 1658473265000,
        //     deleteFlag: "0",
        //     params: {},
        //   },
        //   {
        //     id: "1550375360753827843",
        //     orderId: "1550375360661553152",
        //     spuId: "1539853623467216897",
        //     spuName: "B软件",
        //     specInfo: "一年期",
        //     skuId: "1539853623765012482",
        //     picUrl:
        //       "http://dev-tsp-1255645766.cos.ap-guangzhou.myqcloud.com/2022/05/23/0f6bfaa5327c46769a65456b958fdef4.jpg",
        //     quantity: 33,
        //     status: "1",
        //     activeStatus: "0",
        //     isRefund: "0",
        //     salesPrice: 33,
        //     paymentPrice: 66,
        //     costPrice: 33,
        //     refundTradeNo: "",
        //     services: [
        //       {
        //         id: "1550375360932986882",
        //         orderId: "1550375360661553152",
        //         orderItemId: "1550375360753827840",
        //         serviceCode: "A02",
        //         serviceName: "车道偏离预警",
        //         category: "drive_help",
        //         description: "09090",
        //         learn: 1,
        //         learningAddress: '["00000000"]',
        //         examAddress: "8888888",
        //         series: "SX3",
        //         modelName: "BYD-SX3",
        //         modelCode: "bydsx3",
        //         vehicleConfig: "默认版型",
        //         createDate: 1658472939000,
        //         lastUpdateDate: 1658472939000,
        //         deleteFlag: "0",
        //         isActivate: "0",
        //       },
        //       {
        //         id: "1550375360932986822",
        //         orderId: "1550375360661553152",
        //         orderItemId: "1550375360753827841",
        //         serviceCode: "A03",
        //         serviceName: "车警",
        //         category: "drive_help",
        //         description: "09090",
        //         learn: 1,
        //         learningAddress: '["00000000"]',
        //         examAddress: "8888888",
        //         series: "SX3",
        //         modelName: "BYD-SX3",
        //         modelCode: "bydsx3",
        //         vehicleConfig: "默认版型",
        //         createDate: 1658474939000,
        //         lastUpdateDate: 1658475939000,
        //         deleteFlag: "0",
        //         isActivate: "1",
        //       },
        //       {
        //         id: "1550375360932586822",
        //         orderId: "1550375360661553152",
        //         orderItemId: "1550375360753827841",
        //         serviceCode: "A03",
        //         serviceName: "车ddd的34134",
        //         category: "drive_help",
        //         description: "09090",
        //         learn: 1,
        //         learningAddress: '["00000000"]',
        //         examAddress: "8888888",
        //         series: "SX3",
        //         modelName: "BYD-SX3",
        //         modelCode: "bydsx3",
        //         vehicleConfig: "默认版型",
        //         createDate: 1658474239000,
        //         lastUpdateDate: 16584745939000,
        //         deleteFlag: "0",
        //         isActivate: "1",
        //       },
        //     ],
        //     orderGoods: {
        //       id: "1550375360791576576",
        //       orderId: "1550375360661553152",
        //       orderItemId: "1550375360753827840",
        //       name: "比亚迪冥想软件",
        //       sellPoint: "<p>比亚迪冥想软件</p>",
        //       description:
        //         '<p><img src="http://dev-tsp-1255645766.cos.ap-guangzhou.myqcloud.com/2022/06/23/bf26b0f3b7b14727a3bf49aa288fa9bf.jpg"></p>',
        //       picUrls: [
        //         "http://dev-tsp-1255645766.cos.ap-guangzhou.myqcloud.com/2022/05/23/0f6bfaa5327c46769a65456b958fdef4.jpg",
        //         "http://dev-tsp-1255645766.cos.ap-guangzhou.myqcloud.com/2022/05/30/8f88d2c1f42b450fa10437098f40682e.jpg",
        //       ],
        //       priceDown: 33,
        //       priceUp: 33,
        //       saleNum: 0,
        //       specType: "1",
        //       verifyStatus: "1",
        //       series: "比亚迪",
        //       modelName: ["比亚迪-唐", "比亚迪-宋", "比亚迪-汉"],
        //       modelCode: ["T", "S", "H"],
        //       termType: "ios",
        //       ensureIds: ["1", "2", "3", "4"],
        //       usageNotice:
        //         "<p>使用须知：</p><p><br></p><p>1、xxxxx</p><p><br></p><p>2、xxxxx</p><p><br></p><p>3、xxxxx</p><p><br></p><p>4、xxxxx</p>",
        //       activated: "0",
        //       protocolUrl: "https://whalego.desaysv-xxzx.com/",
        //       introduction: "比亚迪冥想软件",
        //       deviceType: "1",
        //       picUrl:
        //         "http://dev-tsp-1255645766.cos.ap-guangzhou.myqcloud.com/2022/05/23/0f6bfaa5327c46769a65456b958fdef4.jpg",
        //       salesPrice: 0,
        //       marketPrice: 33,
        //       costPrice: 33,
        //       androidSalesPrice: 33,
        //       iosSalesPrice: 33,
        //       tobSalesPrice: 33,
        //       serviceTime: 9999,
        //       spuId: "1539853623467216897",
        //       skuId: "1539853623765012482",
        //     },
        //     createBy: "api",
        //     createDate: 1658473265000,
        //     lastUpdateDate: 1658473265000,
        //     deleteFlag: "0",
        //     params: {},
        //   },
        // ];
      });
    },
    /**
     * 查看商品快照
     */
    handleGoodSnapshot(row) {
      this.showGoodsSnapshot = true;
      // 当前查看的商品快照
      this.goodsSnapshotData = row.orderGoods;
    },
    getSpanArr(data,mergeCol) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.merge.push(1);
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          //根据相同id进行合并,根据需要可进行修改
          if (data[i][mergeCol] === data[i - 1][mergeCol]) {
            this.merge[this.pos] += 1;
            this.merge.push(0);
          } else {
            this.merge.push(1);
            this.pos = i;
          }
        }
      }
    },
    spanCellMerge({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.merge[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    initSeriesList(data){
      this.seriesList = [];
      data.forEach((spuItem)=>{
        spuItem.services.forEach((serviceItem)=>{
          if(!serviceItem['activeStatus']){
            serviceItem['activeStatus'] = '0'
          }
          this.seriesList.push(serviceItem);
        })
      })
    }
  },
};
</script>
<style lang="scss" scoped>
.order-detail-page {
  .header-icon {
    margin-right: 5px;
    font-size: 18px;
    font-weight: 700;
  }
  .collapse-title {
    font-size: 16px;
  }
}
</style>
